<template>
    <div class="wrapper">
        <!--        <div class="title">请输入6为数字密码</div>-->
        <van-password-input :length="6" info="密码为 6 位数字" :value="value" :focused="showKeyboard" @focus="showKeyboard = true" />
        <!-- 数字键盘 -->
        <van-number-keyboard
            random-key-order
            :hide-on-click-outside="false"
            v-model="valueKeyboard"
            :show="showKeyboard"
            theme="custom"
            close-button-text="完成"
            @blur="dow"
            @input="onInput"
            @delete="onDelete"
        />
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { showToast,showSuccessToast } from 'vant'
import { settPayPwd } from '@/api/wallet'
import JSEncrypt from 'jsencrypt'

export default defineComponent({
    name: 'payPwd',
    setup() {
        const router = useRouter()
        const state = reactive({
            value: '',
            valueKeyboard: '',
            showKeyboard: true
        })
        const onInput = value => {
            console.log(value)
            console.log(value.toString().length)
            if (state.value.length < 6) {
                state.value = state.value + value.toString()
            } else {
                showToast('密码最长6位')
            }
        }
        const onDelete = value => {
            console.log(state.value)
            state.value = state.value.slice(0, state.value.length - 1)
        }
        const dow = () => {
            if (state.value.length != 6) {
                showToast('密码长度需6位')
                return
            }
            const key =
                'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAicjwP+F30h1RmMZuAjKIW7+pJxK6NlhvsNks28X4/91iF7lBoZd57ZuN+310vaFxol8khFd5SDbnx7piqPxuAaUC/IygD4iPn2ZSSA5pqqdQYodJVckyh4PNjbh6lDkjYNoAGhz1BY+AiQz2uPTNFnOqmDu1ZfhoQCWMhSleW0zikybl3KRcczDja96+DmKkssXAYN5clnnZMcBjuWOwBz5pgHiQEQTatdWm/un3SR366LrnKAXYUyAEUxwuEA9qtiaDvKgLzSl84FqmvU6cLzmLJM+b+++0CONoT0IR9I6XFkF/wErnd8Y+gEB4oQEURe39BUjl5VcxSJxf1HorSQIDAQAB'
            let jse = new JSEncrypt()
            jse.setPublicKey(key)
            let payPwd = jse.encrypt(state.value)
            settPayPwd({
                payPwd
            }).then(res => {
                if (res.code == 200) {
                    showSuccessToast('设置成功')
                    setTimeout(() => {
                        router.go(-2)
                    }, 1500)
                }
            })
        }
        return {
            ...toRefs(state),
            dow,
            onInput,
            onDelete
        }
    }
})
</script>

<style scoped lang="scss">
.title {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    text-align: center;
    padding: 10px 0;
    color: #000000;
    opacity: 1;
}
.wrapper {
    padding-top: 100px;
}
</style>
